[-"Ok,p;.il/ujkhm bnv,]
<!--
 * @Description:
 * @Author: dh
 * @Date: 2021-12-15 15:35:12
 * @LastEditors: dh
 * @LastEditTime: 2022-10-27 13:48:04
-->
<template>
	<div>
		msg1:<input type="text" :value="modelValue" @input="msg1Change" />
		<br />
		msg2:<input type="text" :value="msg2" @input="msg2Change" />
		<br />
		msg3:<input type="text" :value="msg3" @input="msg3Change" />
	</div>
</template>

<script>
export default {
	props: {
		modelValue: String,
		msg2: String,
		msg3: String,
		// 默认参数修饰符，这里是传入的msg1
		modelModifiers: {
			type: Object,
			default: () => ({}),
		},
		// 自定义修饰符 v-model后面不加: 默认 modelModifiers ；否者是  [:后面参数名]Modifiers
		msg3Modifiers: {
			type: Object,
			default: () => ({}),
		},
	},
	emits: ['update:modelValue', 'update:msg2', 'update:msg3', 'update:msg3'],
	mounted() {},
	// model: {
	//     prop: ['msg1'],
	//     event: 'input',
	// },
	methods: {
		msg1Change(e) {
			const val = e.target.value;
			if (this.modelModifiers.toLowerCase) {
				this.$emit('update:modelValue', val.toLowerCase()); // 由于父组件直接写的v-model='msg1',所以此处必须这样写 update:modelValue
			}
		},
		msg2Change(e) {
			const val = e.target.value;
			this.$emit('update:msg2', val);
		},
		msg3Change(e) {
			const val = e.target.value;
			if (this.msg3Modifiers.toUpperCase) {
				this.$emit('update:msg3', val.toUpperCase());
			} else {
				this.$emit('update:msg3', val);
			}
		},
	},
};
</script>

<style lang="sass" scoped></style>
